<template>
	<view class="content-reservation">
		<view class="header-section">
			<compResSearch class="search" v-model:inputVal="searchValue" placeholderTip="请输入查找的实验室名称" @search="search">
			</compResSearch>
		</view>

		<z-paging class="Zpage" ref="paging" :fixed="false" :auto="false" :bottom-loading="true" use-virtual-list
			@query="onQuery" :show-scrollbar="false">
			<template #cell="{ item, index }">
				<compResListItem class="res-sys-item" :item="item"></compResListItem>
			</template>
		</z-paging>

		<!-- 背景动画元素 -->
		<view class="circle circle-1"></view>
		<view class="circle circle-2"></view>
		<view class="circle circle-3"></view>
	</view>
</template>

<script lang="ts" setup>
import db from '@/api/database'
import {
	ref,
	nextTick,
	onMounted,
} from 'vue'
import {
	onShow
} from '@dcloudio/uni-app'
import compResListItem from '@/pages/reservation/comps/comp-res-list-item.vue'
import compResSearch from '@/pages/reservation/comps/comp-res-search.vue'

const props = defineProps({
	searchValue: {
		type: String,
		default: '',
	},
})

const searchValue = ref(props.searchValue || '')

const paging = ref(null)
const testData = ref('')
const emit = defineEmits(['login'])

async function onQuery(pageNo, pageSize) {
	try {
		const offset = (pageNo - 1) * pageSize;
		const res = await db.collection('syslb')
			.where({
				status: '1',
				name: new RegExp(searchValue.value, 'i')
			})
			.skip(offset)
			.limit(pageSize)
			.get();

		paging.value.complete(res.data);
	} catch (error) {
		console.error('查询数据失败:', error);
		paging.value.complete([], false);
	}
}

function scrollToBottom() { }

function goToDetail(item, index) { }

function backToTopClick() { }

onShow(() => {
	if (paging.value) paging.value.reload()
})

function onclick(item) {

}

function search() {
	paging.value && paging.value.reload()
}

onMounted(() => {
	searchValue.value = props.searchValue
	paging.value && paging.value.reload()
})

</script>

<style lang="scss" scoped>
@import "/static/css/iconfont.css";

/* 关键帧动画定义 */
@keyframes pulse {
	0% {
		transform: scale(1);
		opacity: 0.8;
	}

	50% {
		transform: scale(1.05);
		opacity: 0.6;
	}

	100% {
		transform: scale(1);
		opacity: 0.8;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.content-reservation {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	background: linear-gradient(135deg, #ffffff 0%, #d1d6dd 100%);
	position: relative;
	overflow: hidden;
	animation: fadeIn 0.8s ease-out;

	.header-section {
		width: 95%;
		// background: linear-gradient(135deg, #22c4ff, #2196f3);
		border-bottom-right-radius: 15px;
		border-bottom-left-radius: 15px;
		// box-shadow: 0 5px 15px rgba(33, 150, 243, 0.3);
		padding: 20px 0 0;
		z-index: 2;
	}

	.Zpage {
		flex: 1;
		width: 95%;
		padding: 10px;
		z-index: 1;
		position: relative;

		.res-sys-item {
			margin-bottom: 10px;
			animation: fadeIn 0.5s ease-out;
		}
	}
}

/* 背景动画圆圈 */
.circle {
	position: absolute;
	border-radius: 50%;
	background: linear-gradient(45deg, rgba(34, 196, 255, 0.2), rgba(33, 150, 243, 0.2));
	filter: blur(5px);
	z-index: 0;
}

.circle-1 {
	width: 500rpx;
	height: 500rpx;
	top: -150rpx;
	right: -100rpx;
	animation: pulse 8s infinite ease-in-out;
}

.circle-2 {
	width: 350rpx;
	height: 350rpx;
	bottom: 100rpx;
	left: -100rpx;
	animation: pulse 6s infinite ease-in-out 1s;
}

.circle-3 {
	width: 600rpx;
	height: 600rpx;
	bottom: -300rpx;
	right: 30%;
	animation: pulse 10s infinite ease-in-out 2s;
}
</style>